<template>
	<navigatorComp title="家族祠堂" bgcColor="#121512" fontColor="#fff"></navigatorComp>

	<view class="display_flex temple_tab">
		<up-tabs
			:current="currentTab"
			lineWidth="48rpx"
			lineHeight="6rpx"
			:activeStyle="{ color: '#fff' }"
			:inactiveStyle="{ color: '#666666' }"
			itemStyle="font-weight: 500;font-size: 36rpx;margin-bottom:25rpx;width:250rpx;"
			lineColor="#F3E0BB"
			:list="tablist"
			@click="clickTab"
		></up-tabs>
	</view>

	<!-- 空图 -->
	<view class="temple_empty_box" v-if="templeList.length === 0">
		<image
			src="http://112.124.50.179:8888/imgs/home/temple_empty.png"
			class="empty_img"
		></image>
		<view class="empty_tip" v-if="currentTab === 0">快来创建您的线上祠堂吧~</view>
		<view class="empty_tip" v-else>
			您还未加入家族祠堂
			<br />
			快联系管理员进行邀请吧
		</view>
		<myButton
			v-if="currentTab === 0"
			name="创建祠堂"
			@clickBtn="goUrl('/subPages/home/ancestralTemple/create_temple')"
			style="margin: 56rpx 0 0 0"
		>
			<image
				class="add_memory_image"
				src="http://112.124.50.179:8888/imgs/home/add_memory.png"
				mode=""
			></image>
		</myButton>
		<myButton
			@clickBtn="openInviteCodePopup"
			v-if="currentTab === 1"
			name="填写邀请码"
			style="margin: 56rpx 0 0 0"
		>
			<image
				class="add_memory_image"
				src="http://112.124.50.179:8888/imgs/home/edit.png"
				mode=""
			></image>
		</myButton>
		<view class="empty_bottom">
			云端筑家庙 心香献先人
			<br />
			线上聚族情 世代传家声
		</view>
	</view>

	<!-- 纪念祠堂列表 -->
	<mescroll-uni
		:down="downOption"
		:up="upOption"
		@init="mescrollInit"
		@down="downCallback"
		@up="upCallback"
		:height="height + 'px'"
	>
		<view style="padding-bottom: 32rpx">
			<view v-for="(item, index) in templeList">
				<!-- 普通祠堂 -->
				<view
					class="temple_ordinary"
					@click="
						goUrl(
							'/subPages/home/ancestralTemple/detail?inviteCode=' + item.inviteCode,
							item.hallId
						)
					"
					v-if="item.hallType == 1"
				>
					<view class="temple_content">
						<image
							class="temple_content_more"
							:src="imgUrl + 'imgs/home/hall_more1.png'"
							mode=""
							@click.native.stop="showMore(item)"
						></image>
						<image
							class="temple_avater"
							:src="imgUrl + 'imgs/home/temple_img2.png'"
						></image>
						<view class="temple_name">{{ item.hallName }}</view>
						<view class="temple_num">供奉灵位({{ item.lingweiNumber }})</view>
						<view
							class="temple_line"
							v-if="item.userType === 1 || item.userType === 2"
						></view>
						<!-- 只有创建人员和管理员才有 -->
						<view
							class="temple_funcList"
							v-if="item.userType === 1 || item.userType === 2"
						>
							<view
								v-if="item.userType === 1 || item.userType === 2"
								class="temple_func"
								@click.native.stop="
									goUrl(
										'/subPages/home/ancestralTemple/friendGroup?dataObj=' +
											JSON.stringify(item)
									)
								"
							>
								<image :src="imgUrl + 'imgs/home/hall_func1.png'" mode=""></image>
								祠堂族员({{ item.memberNumber }})
							</view>
							<view
								v-if="item.userType === 1 || item.userType === 2"
								class="temple_func"
								@click.native.stop="
									goUrl(
										'/subPages/home/ancestralTemple/detail?showDecoration=' +
											JSON.stringify(true) +
											'&inviteCode=' +
											item.inviteCode,
										item.hallId
									)
								"
							>
								<image :src="imgUrl + 'imgs/home/hall_func2.png'" mode=""></image>
								装修祠堂
							</view>
							<view
								v-if="item.userType === 1"
								class="temple_func"
								@click.native.stop="
									goUrl('/subPages/home/ancestralTemple/setting', item.hallId)
								"
							>
								<image
									src="http://112.124.50.179:8888/imgs/home/hall_func3.png"
									mode=""
								></image>
								设置
							</view>
						</view>
					</view>
				</view>
				<!-- 豪华版 -->
				<!-- <view class="temple_vip" v-if="item.hallType == 2">
					<image
						class="temple_bgc"
						src="http://112.124.50.179:8888/imgs/home/hallbgc_vip.png"
						mode=""
					></image>
					<view class="temple_topTip">
						<image
							src="http://112.124.50.179:8888/imgs/home/medal_vip.png"
							mode=""
						></image>
						豪华祠堂
					</view>
					<view class="temple_content">
						<image
							class="temple_content_more"
							src="http://112.124.50.179:8888/imgs/home/hall_more1.png"
							mode=""
							@click.native.stop="showMore(item)"
						></image>
						<image class="temple_avater" :src="item.hallImage"></image>
						<view class="temple_name">{{ item.hallName }}</view>
						<view class="temple_num">供奉灵位({{ item.lingweiNumber }})</view>
						<view class="temple_line"></view>
						<view class="temple_funcList">
							<view
								class="temple_func"
								v-if="item.userType === 1 || item.userType === 2"
								@click.native.stop="
									goUrl(
										'/subPages/home/ancestralTemple/friendGroup?dataObj=' +
											JSON.stringify(item)
									)
								"
							>
								<image
									src="http://112.124.50.179:8888/imgs/home/hall_func4.png"
									mode=""
								></image>
								祠堂族员({{ item.memberNumber }})
							</view>
							<view
								v-if="item.userType === 1"
								class="temple_func"
								@click.native.stop="
									goUrl(
										'/subPages/home/ancestralTemple/detail?showDecoration=' +
											JSON.stringify(true),
										item
									)
								"
							>
								<image
									src="http://112.124.50.179:8888/imgs/home/hall_func5.png"
									mode=""
								></image>
								装修祠堂
							</view>
							<view
								v-if="item.userType === 1 || item.userType === 2"
								class="temple_func"
								@click.native.stop="
									goUrl('/subPages/home/ancestralTemple/setting', item.hallId)
								"
							>
								<image
									src="http://112.124.50.179:8888/imgs/home/hall_func6.png"
									mode=""
								></image>
								设置
							</view>
						</view>
					</view>
				</view>
			 -->
			</view>
		</view>
	</mescroll-uni>

	<!-- 按钮弹框 -->
	<u-popup
		:show="showMoreFunc"
		bgColor="rgba(0,0,0,0)"
		@close="closeMore"
		custom-style="padding:0 16rpx 0;"
	>
		<u-button
			@click="copyInviteCode"
			shape="circle"
			:custom-style="{ ...moreBtnStyle, marginBottom: 0, borderRadius: '26rpx 26rpx 0 0' }"
		>
			复制邀请码
		</u-button>
		<u-button
			@click="confirmDel"
			v-if="showItem.userType === 1"
			shape="circle"
			:custom-style="{ ...moreBtnStyle, borderRadius: ' 0 0 26rpx 26rpx' }"
		>
			删除祠堂
		</u-button>
		<u-button
			v-else
			shape="circle"
			:custom-style="{ ...moreBtnStyle, borderRadius: ' 0 0 26rpx 26rpx' }"
			@click="exit"
		>
			退出祠堂
		</u-button>
		<u-button
			shape="circle"
			:custom-style="{
				...moreBtnStyle,
				fontWeight: 600
			}"
			@click="closeMore"
		>
			取消
		</u-button>
	</u-popup>

	<!-- 删除确认框 -->
	<myModel
		v-model:show="showDelModel"
		title="删除祠堂"
		:content="'删除祠堂之后重新创建也无法恢复数据,是否确定删除' + showItem.hallName + '祠堂?'"
		@cancel="cancelModel"
		@confirm="confirmModel"
	>
		<!-- 付费祠堂删除后不退福币，新建需要重新付费并且无法恢复已删除数据，是否确定删除？ -->
	</myModel>
	<InviteCodePopup ref="InviteCodePopupRef" :text="'祠堂'" type="hall" @query="query" />

	<!-- 创建族谱浮动按钮 -->
	<image
		v-if="currentTab === 0 && templeList.length > 0"
		@click="goUrl('/subPages/home/ancestralTemple/create_temple')"
		class="addIcon"
		:style="{ right: windowWidth / 2 - clientWidth / 2 + 6 + 'px' }"
		:src="imgUrl + 'imgs/home/temple_add.png'"
		mode=""
	></image>
	<!-- 填写邀请码浮动按钮 -->
	<image
		v-if="currentTab === 1 && templeList.length > 0"
		@click="openInviteCodePopup"
		class="addIcon"
		:style="{ right: windowWidth / 2 - clientWidth / 2 + 6 + 'px' }"
		:src="imgUrl + 'imgs/home/temple_invite.png'"
		mode=""
	></image>
</template>

<script setup>
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
import { onReady, onShow, onLoad, onPageScroll, onReachBottom, onUnload } from '@dcloudio/uni-app';
import { onMounted, ref, reactive, nextTick } from 'vue';
import { imgUrl } from '@/external/utils/imgUrl';
import navigatorComp from '/components/navigator/index.vue';
import myModel from '/components/model/index.vue';
import myButton from '/components/button/index.vue';
import InviteCodePopup from '@/components/inviteCodePopup/index.vue';
import HomeApi from '@/API/home/index.js';
const homeApi = new HomeApi();

const windowWidth = uni.getSystemInfoSync().windowWidth;
const clientWidth = document?.body.clientWidth || uni.getSystemInfoSync().windowWidth;

onShow(() => {
	setTimeout(() => {
		latestId.value = 0;
		getMescroll().resetUpScroll();
	}, 1);
});
onMounted(() => {
	uni.createSelectorQuery()
		.select('.temple_tab')
		.boundingClientRect((res) => {
			// #ifdef H5
			height.value =
				uni.getSystemInfoSync().windowHeight -
				getApp().globalData.bottom -
				res.height -
				uni.upx2px(88) -
				uni.upx2px(24) -
				getApp().globalData.navHeight;
			// #endif

			// #ifdef MP-WEIXIN
			height.value =
				uni.getSystemInfoSync().windowHeight -
				getApp().globalData.bottom -
				res.height -
				uni.upx2px(24) -
				getApp().globalData.navHeight;
			// #endif
		})
		.exec();
});

//卸载页面
onUnload(() => {
	console.log('onUnload');
	uni.removeStorageSync('hallId');
});

const tablist = reactive([
	{
		name: '创建的祠堂'
	},
	{
		name: '加入的祠堂'
	}
]);
const { getMescroll, mescrollInit } = useMescroll(); // 调用mescroll的hook
//翻页信息
const downOption = ref({
	auto: false
});
const upOption = ref({
	auto: false,
	empty: false
});
const InviteCodePopupRef = ref();
const currentTab = ref(0); //默认为创建的祠堂，0
const height = ref(0); //切换页的高度
const showDelModel = ref(false);
const templeList = ref([]); //祠堂列表
const isSelf = ref(false);
let latestId = ref(0);
let showItem = ref({}); //点击更多的用户信息
let userId = uni.getStorageSync('userInfo').userId;
// 更多按钮
const showMoreFunc = ref(false);
const moreBtnStyle = {
	height: '120rpx',
	borderRadius: '26rpx 26rpx 26rpx 26rpx',
	backgroundColor: '#fff',
	fontWeight: '400',
	fontSize: '40rpx',
	color: '#007AFF',
	marginBottom: '16rpx'
};

const confirmDel = () => {
	showDelModel.value = true;
};

/**
 * 切换tab
 */
const clickTab = (item) => {
	currentTab.value = item.index;
	latestId.value = 0;
	templeList.value = [];
	getMescroll().resetUpScroll();
};
const query = () => {
	setTimeout(() => {
		latestId.value = 0;
		getMescroll().resetUpScroll();
	}, 500);
};
const downCallback = (mescroll) => {
	latestId.value = 0;
	getMescroll().resetUpScroll();
};

const upCallback = (mescroll) => {
	homeApi
		.getHallListApi({
			hallType: currentTab.value + 1,
			latestId: latestId.value
		})
		.then((res) => {
			const curPageData = res.data.hallList || []; // 当前页数据
			if (latestId.value == 0) templeList.value = [];
			templeList.value = templeList.value.concat(curPageData);
			if (curPageData.length) {
				latestId.value = curPageData[curPageData.length - 1].hallId || 0;
			}
			if (currentTab.value === 1) {
				mescroll.endByPage(curPageData.length, 1);
			} else {
				mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
			}
		})
		.catch(() => {
			mescroll.endErr(); // 请求失败, 结束加载
		});
};

const goUrl = (url, hallId) => {
	if (hallId) {
		uni.setStorageSync('hallId', hallId);
	}
	uni.navigateTo({
		url: url
	});
};

const confirmModel = (item) => {
	homeApi
		.deleteHallApi({
			hallId: showItem.value.hallId
		})
		.then((res) => {
			latestId.value = 0;
			getMescroll().resetUpScroll();
			uni.showToast({
				icon: 'none',
				title: res.msg
			});
			showMoreFunc.value = false;
			showDelModel.value = false;
		})
		.catch(() => {});
};
const openInviteCodePopup = () => {
	InviteCodePopupRef.value.inviteCodePopup.show = true;
};
const copyInviteCode = () => {
	uni.setClipboardData({
		data: showItem.value.inviteCode,
		success: function () {
			uni.showToast({
				title: '复制成功'
			});
			showMoreFunc.value = false;
		},
		fail: function (err) {
			console.log('复制失败', err);
		}
	});
};
const showMore = (item) => {
	showItem.value = item;
	showMoreFunc.value = true;
};

const closeMore = () => {
	showMoreFunc.value = false;
};
const cancelModel = () => {
	showDelModel.value = false;
};
</script>

<style lang="scss">
page {
	background-color: #121512;
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
	overflow: hidden;
	box-sizing: border-box;
}

.edit {
	font-weight: 400;
	font-size: 32rpx;
	color: #f3e0bb;
	line-height: 32rpx;
	text-align: right;
}

.swiper {
	height: 1000rpx;
	overflow: auto;
}

.temple_tab {
	margin: 32rpx 0 24rpx;
}

.temple_empty_box,
.joinedTemple_empty {
	margin: 0 32rpx;
	padding: 80rpx 0 64rpx 0;
	background: #292b2a;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
	display: flex;
	align-items: center;
	flex-direction: column;

	.empty_img {
		width: 330rpx;
		height: 252rpx;
	}

	.empty_tip {
		font-weight: 400;
		font-size: 24rpx;
		color: #ffffff;
		line-height: 40rpx;
		text-align: center;
		margin: 32rpx 0 8rpx 0;
	}

	.empty_bottom {
		margin-top: 32rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		line-height: 40rpx;
		text-align: center;
	}

	.add_memory_image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 4rpx;
	}
}

.temple_ordinary {
	margin: 0 32rpx 32rpx;
	width: auto;
	// height: 526rpx;
	position: relative;
	background: url('http://112.124.50.179:8888/imgs/home/temple_card.png') no-repeat;
	background-size: cover;

	.temple_bgc {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.temple_topTip {
		width: 194rpx;
		height: 50rpx;
		padding-right: 4rpx;
		box-sizing: border-box;
		background: rgba(101, 101, 101, 0.4);
		border-radius: 25rpx 25rpx 25rpx 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 600;
		font-size: 30rpx;
		color: #ffffff;
		line-height: 35rpx;
		position: relative;
		top: 16rpx;
		left: 24rpx;

		image {
			width: 42rpx;
			height: 42rpx;
			margin-right: 4rpx;
		}
	}

	.temple_content {
		display: flex;
		align-items: center;
		flex-direction: column;

		.temple_content_more {
			position: absolute;
			width: 48rpx;
			height: 48rpx;
			right: 32rpx;
			top: 16rpx;
		}

		.temple_avater {
			width: 152rpx;
			height: 202rpx;
			margin-top: 40rpx;
		}

		.temple_name {
			font-weight: 500;
			font-size: 28rpx;
			color: #524630;
			line-height: 40rpx;
			margin-top: 16rpx;
		}

		.temple_num {
			font-weight: 400;
			font-size: 22rpx;
			color: #524630;
			line-height: 30rpx;
			margin-top: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding-bottom: 32rpx;

			image {
				width: 22rpx;
				height: 22rpx;
				margin-right: 4rpx;
			}
		}

		.temple_line {
			width: 606rpx;
			height: 4rpx;
			background-color: #666666;
			opacity: 0.3;
			border-radius: 1rpx;
		}

		.temple_funcList {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 24rpx;
			width: 100%;
			padding: 0 50rpx 24rpx;
			box-sizing: border-box;

			.temple_func {
				width: 150rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				font-weight: 400;
				font-size: 22rpx;
				color: #524630;
				line-height: 26rpx;
			}

			image {
				width: 64rpx;
				height: 64rpx;
				margin-bottom: 8rpx;
			}
		}
	}
}

.temple_vip {
	.temple_topTip {
		background: rgba(225, 229, 178, 0.4);
	}

	.temple_content_deadeeList {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 0 120rpx;
		box-sizing: border-box;

		.temple_avater {
			margin-top: 32rpx;
		}

		.temple_deadee {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.temple_name {
			color: #956b00;
		}

		.temple_num {
			color: #956b00;
			align-items: flex-start;
		}
	}

	.temple_line {
		background-color: #fbc438 !important;
	}

	.temple_func {
		color: #956b00;
	}
}

.addIcon {
	position: fixed;
	right: 32rpx;
	width: 144rpx;
	height: 144rpx;
	bottom: 30vh;
	z-index: 999;
}
</style>
